<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
</head>
<style>
    div{margin:0;padding:0;border:0}
</style>
<body style="margin:0; padding:0; overflow:hidden">

<div style="float:left; width:400px; background-color:#039" id="right">
    <div id="top_header" style="height:150px">Tabs</div>
    <div id="iframe_container" style="background-color:#a39">
        <iframe src="http://baidu.com" frameborder="0" width="400" height="900" id="ifr1" name="ifr1" scrolling="auto"></iframe>
    </div>
</div>
<div style="float:right; width:150px; height:500px; background-color:#060" id="left">
    Right
</div>

<script language="javascript">
    function g(id){
        return document.getElementById(id);
    }
    var left_width = 150;//定义左边部分的宽度
    var right_top_height = 150;//定义右边分部顶部tab的高度
    var page_min_height = 500;//定义整个页面的最低高度

    function resetFrame()
    {
        try{
            var xy = [window.innerWidth,window.innerHeight];
            var width = xy[0];
            var height = xy[1];
            if(width<left_width+300) width=left_width+300;
            if(height<page_min_height) height=page_min_height;
            var left_obj = g('left');
            var right_obj = g('right');
            var topheader_obj = g('top_header');
            var ifr1_obj = g('ifr1');
            var iframe_container_obj = g('iframe_container');
            left_obj.style.height = height+"px";
            right_obj.style.height = height+"px";
            right_obj.style.width = (width-left_width)+"px";

            iframe_container.style.width = (width-left_width)+"px";
            iframe_container.style.height = (height-right_top_height)+"px";

            ifr1_obj.width = width-left_width;
            ifr1_obj.height = height-right_top_height;

            console.log("width="+width+",height="+height+", right width="+(width-left_width)+",iframe height="+(height-right_top_height));
        }catch(e){
            alert();
        }
    }
    resetFrame();
    window.onresize = resetFrame;
</script>
</body>
</html>
